// 变量（省略）

// if 控制语句
p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    @if null  { border: 3px double; }
  }

a{
  @if 1>3 {font-size: 10px;}
  @else if 1>2 {font-size: 5px;}
  @else {font-size: 1px;}
}

// for 语句
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

// each 语句 （相当于python for 语句）
// list 用法
// 变量用法
$animal-list:(puma,sea-slug,egret,salamander);
$var2-list:(a1,a2,a3,a4);
$var3-list:(b1,b2,b3,b4);

@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// 3变量的each 循环
@each $i , $j, $k in zip($animal-list,$var2-list,$var3-list)
{
  .#{$i}-#{$j}-#{$k}{font-style: italic;  }
}

// while循环

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}


// 混合指令 相当于class 引用

// 先定义
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ccc;
}
// 再引用
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}